<template>
	<view
		class="commonMateriaHeader"
		:class="{
			skelett: isSkelett,
			isClose: !isComponentsStatus,
			materiaHeaderBgColor: isBgColor
		}"
	>
		<view class="commonMateriaHeader-content">
			<view class="commonMateriaHeader-title" :style="{ height: titleHieght }">
				<view class="commonMateriaHeader-title-left">
					<image :src="titleIcon" />
					<text>{{ title }}</text>
				</view>

				<view class="commonMateriaHeader-title-right" @click.prevent.stop="changeComponentsStatus">
					<text>{{ componentsStatusLable }}</text>
					<image :src="rightIcon" />
				</view>
			</view>

			<view
				class="commonMateriaHeader-main"
				:animation="animationData"
				@transitionend="animationend"
				:style="{ height: mainContentHeight }"
			>
				<slot>
					<view class="commonMateriaHeader-main-item" v-for="(item, index) in list" :key="index">
						<view>
							<text>·</text>
							{{ item.label || '' }}
						</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { getDomeInfo } from '@/utils/common';

const titleIcon = Object.freeze(`${defaultImageUrl}icon/icon_upload_rule.png`);
const rightIcon = Object.freeze(`${defaultImageUrl}icon/icon_uupload_up.png`);

const defaultList = Object.freeze([
	{
		label: '每次上传素材 至少3张图片+3个视频，最多10张图片+6个视频'
	},
	// {
	// 	label: '上传成功即可获官方收益0.2元'
	// },
	{
		label: '图片被下载收益0.2元/张，视频被下载收益0.5元/份'
	}
]);

export default {
	name: 'commonMateriaHeader',

	props: {
		title: {
			type: String,
			default: '上传规则'
		},

		height: {
			type: Number,
			default: 72
		},

		mainHeight: {
			type: Number,
			default: 0
		},

		list: {
			type: Array,
			default: () => {
				return defaultList;
			}
		},

		titleIcon: {
			type: String,
			default: titleIcon
		},

		isSkelett: {
			type: Boolean,
			default: false
		},

		callBack: {
			type: Function
		},

		isBgColor: {
			type: Boolean,
			default: false
		},

		duration: {
			type: Number,
			default: 300
		}
	},

	data() {
		return {
			rightIcon,

			animationData: {},
			hintStatusHeight: 0,
			isComponentsStatus: true
		};
	},

	created() {
		this.$nextTick((e) => {
			const { list } = this;
			getDomeInfo.call(this, '.commonMateriaHeader-main', false).then((res) => {
				this.hintStatusHeight = (res?.height || 0) - (list.length === 4 ? 13 : 0);
			});
		});

		this.animation = uni.createAnimation({
			duration: this.duration
		});
	},

	computed: {
		titleHieght() {
			const { height } = this;

			return `${uni.upx2px(height)}px`;
		},

		componentsStatusLable() {
			const { isComponentsStatus } = this;

			return isComponentsStatus ? '收起' : '展开';
		},

		mainContentHeight() {
			const { hintStatusHeight } = this;

			if (hintStatusHeight) {
				return `${hintStatusHeight}px`;
			}

			return 'auto';
		}
	},

	methods: {
		changeComponentsStatus() {
			const { callBack, isSkelett, animation, mainHeight, isComponentsStatus, hintStatusHeight = 0 } = this;

			if (isSkelett) {
				return;
			}

			const status = !isComponentsStatus;
			this.isComponentsStatus = status;

			animation.height(status ? hintStatusHeight : mainHeight).step();

			this.animationData = animation.export();
		},

		animationend() {
			const { callBack } = this;

			callBack?.();
			this.$emit('callBack');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.commonMateriaHeader {
	position: relative;

	background: #fff;
	border-radius: 24rpx;

	&.materiaHeaderBgColor {
		&::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 1000rpx;
			transition: height 0.3s;
			background: linear-gradient(180deg, #fff5e9 0%, #ffedd5 100%);
		}
	}

	&-content {
		position: sticky;
		background: #fff;
		border-radius: 24rpx;
	}

	&-title {
		padding: 0 28rpx 0 20rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;

		> view {
			display: flex;
			align-items: center;
		}

		&-left {
			color: #333;
			font-size: 28rpx;
			font-weight: bold;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}

		&-right {
			color: #999;
			font-size: 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 4rpx;
			}
		}
	}

	&-main {
		padding-left: 74rpx;

		overflow: hidden;
		backface-visibility: hidden;

		// transition: height 0.3s;
		// transform: translateZ(0) translate3d(0, 0, 0);

		&-item {
			font-weight: 500;
			color: #333;
			font-size: 20rpx;
			line-height: 40rpx;
			padding-right: 28rpx;

			&:first-child {
				margin-top: 4rpx;
			}

			&:last-child {
				margin-bottom: 18rpx;
			}
			view {
				display: flex;
				position: relative;
				padding-left: 20rpx;

				text {
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}

	&.isClose {
		.commonMateriaHeader-title-right {
			image {
				transform: rotate(180deg);
			}
		}

		&::before {
			height: 400rpx;
		}
	}

	&.skelett {
		.commonMateriaHeader-title {
			&-right,
			&-left {
				border-radius: 12rpx;
				background: $skelettBgColor;

				text,
				image {
					visibility: hidden;
				}
			}
		}

		.commonMateriaHeader-main {
			padding-right: 28rpx;

			&-item {
				height: 40rpx;
				margin-top: 10rpx;
				border-radius: 12rpx;
				background: $skelettBgColor;

				&:first-child {
					margin-top: 0;
				}

				text,
				view,
				image {
					display: none;
				}
			}
		}
	}
}
</style>
